<template>
<section v-loading="loading">

   <!-- 主体内容 -->
   <el-card class="box-card" v-if="listData.length!=0">
      <div slot="header" class="clearfix">
         <span>支付账户</span>
         <el-button style="float: right; padding: 3px 0" type="text" @click="dialog(listData)">编辑</el-button>
      </div>
      <el-form :model="listData" label-width="100px">
         <el-form-item label="开户名称：">{{ listData.real_name }}</el-form-item>
         <el-form-item label="开户银行：">{{ listData.bank }}</el-form-item>
         <el-form-item label="开户支行：">{{ listData.branch }}</el-form-item>
         <el-form-item label="银行卡号：">{{ listData.card_num }}</el-form-item>
         <el-form-item label="手机号：">{{ listData.mobile }}</el-form-item>
      </el-form>
   </el-card>
   <div style="text-align:center;width:100%" v-else>
      <el-button type="primary" @click="dialogAdd" style="margin-top:300px">添加支付信息</el-button>
      <br><br>
      <font color="#909399">尚未添加支付信息，请点击添加</font>
   </div>

   <!-- ↓↓新建↓↓ -->
   <el-dialog title="新建支付账户" :visible.sync="addVisible" width="600px">
      <el-form v-if="addVisible" :model="edit" :rules="rules" ref="edit" label-width="100px">
         <el-form-item label="开户名称" prop="real_name">
            <el-input v-model="edit.real_name" placeholder="请输入开户名称" ></el-input>
         </el-form-item>
         <el-form-item label="开户银行" prop="bank">
            <el-input v-model="edit.bank" placeholder="请输入开户银行" ></el-input>
         </el-form-item>
         <el-form-item label="开户支行" prop="branch">
            <el-input v-model="edit.branch" placeholder="请输入开户支行" ></el-input>
         </el-form-item>
         <el-form-item label="银行卡号" prop="card_num">
            <el-input v-model="edit.card_num" placeholder="请输入银行卡号" ></el-input>
         </el-form-item>
         <el-form-item label="手机号" prop="mobile">
            <el-input type="number" v-model.number="edit.mobile" placeholder="请输入手机号" ></el-input>
         </el-form-item>
      </el-form>
      <div slot="footer">
         <el-button @click="addVisible=false">取 消</el-button>
         <el-button type="primary" @click="add('edit')">确 定</el-button>
      </div>
   </el-dialog>
   <!-- ↑↑新建↑↑ -->
   <!-- ↓↓编辑弹窗↓↓ -->
   <el-dialog title="编辑支付账户" :visible.sync="editVisible" width="600px">
      <el-form v-if="editVisible" :model="edit" :rules="rules" ref="edit" label-width="100px">
         <el-form-item label="开户名称" prop="real_name">
            <el-input v-model="edit.real_name" placeholder="请输入开户名称" ></el-input>
         </el-form-item>
         <el-form-item label="开户银行" prop="bank">
            <el-input v-model="edit.bank" placeholder="请输入开户银行" ></el-input>
         </el-form-item>
         <el-form-item label="开户支行" prop="branch">
            <el-input v-model="edit.branch" placeholder="请输入开户支行" ></el-input>
         </el-form-item>
         <el-form-item label="银行卡号" prop="card_num">
            <el-input v-model="edit.card_num" placeholder="请输入银行卡号" ></el-input>
         </el-form-item>
         <el-form-item label="手机号" prop="mobile">
            <el-input type="number" v-model.number="edit.mobile" placeholder="请输入手机号" ></el-input>
         </el-form-item>
      </el-form>
      <div slot="footer">
         <el-button @click="editVisible=false">取 消</el-button>
         <el-button type="primary" @click="update('edit')">确 定</el-button>
      </div>
   </el-dialog>
   <!-- ↑↑编辑弹窗↑↑ -->
</section>
</template>

<script>
import * as api from '../api/index'
export default {
   name: 'setting',
   data() {
      return {
         m: 'setting',
         addVisible:false,
         editVisible:false,
         edit:{},
         rules: {
            real_name: [
               { required: true, message: '开户名称不能为空', trigger: 'blur' }
            ],
            bank: [
               { required: true, message: '开户银行不能为空', trigger: 'blur' }
            ],
            branch: [
               { required: true, message: '开户支行不能为空', trigger: 'blur' }
            ],
            card_num: [
               { required: true, message: '银行卡号不能为空', trigger: 'blur' }
            ],
            mobile: [
               { required: true, message: '手机号不能为空', trigger: 'blur' }
            ],
         }
      }
   },
   computed: {
      listData() {
         return this.$store.state[this.m].data;
      },
      loading() {
         return this.$store.state[this.m].loading;
      }
   },
   methods: {
      getData() { //更新列表数据
         this.$store.dispatch( this.m + '/getData', {} );
      },
      dialog(row){
         this.edit ={};
         this.edit = JSON.parse(JSON.stringify(row));
         this.editVisible = true;
      },
      dialogAdd(){
         this.edit = {};
         this.addVisible = true;
      },
      update(v){
         let _this = this;
         this.$refs[v].validate((valid) => {
            if (valid) {
               api.setting.update(_this.edit, res => {
                  if (res.status == 1) {
                     _this.getData();
                     _this.editVisible = false;
                  }
                  else _this.$message(res);
               });
            } else return false;
         });
      },
      add(v){
         let _this = this;
         this.$refs[v].validate((valid) => {
            if (valid) {
               api.setting.add(_this.edit, res => {
                  if (res.status == 1) {
                     _this.getData();
                     _this.addVisible = false;
                  }
                  else _this.$message(res);
               });
            } else return false;
         });
      },
   },
   created() {
      if(this.$parent.school.current.id==undefined||this.$store.state[this.m].school_id!=this.$parent.school.current.id) {
         this.getData();
         this.$store.commit(this.m+'/update',{type:'school_id',data:this.$parent.school.current.id});
      }
   }
}
</script>

<style scoped>
.text {
   font-size: 14px;
}
.item {
   margin-bottom: 18px;
}
.clearfix:before, .clearfix:after {
   display: table;
   content: "";
}
.clearfix:after {
   clear: both
}
.box-card {
   width: 400px;
}
</style>
